/*
    Example usage:
    @include animation(fadeInDown, 1s, .5s)
 */
.item-animate1.ng-enter {
  -o-animation-name: "zoomInLeft";
  -o-animation-delay: 0.5s;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease;
  -o-animation-fill-mode: both;
  -moz-animation-name: "zoomInLeft";
  -moz-animation-delay: 0.5s;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -webkit-animation-name: "zoomInLeft";
  -webkit-animation-delay: 0.5s;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
  animation-name: "zoomInLeft";
  animation-delay: 0.5s;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
  backface-visibility: hidden; }

.item-animate1.ng-enter-stagger {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
  /* override to make sure it's not inherited from other styles */
  -webkit-animation-duration: 0s;
  animation-duration: 0s; }

.item-animate2.ng-enter {
  -webkit-animation: "zoomInLeft" 1s;
  animation: "zoomInLeft" 1s; }

.item-animate2.ng-enter-stagger {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
  /* override to make sure it's not inherited from other styles */
  -webkit-animation-duration: 0;
  animation-duration: 0; }

.button-fab.ng-enter {
  -o-animation-name: fadeInUp;
  -o-animation-delay: 0s;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease;
  -o-animation-fill-mode: both;
  -moz-animation-name: fadeInUp;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
  animation-name: fadeInUp;
  animation-delay: 0s;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
  backface-visibility: hidden; }

.button-fab.ng-leave {
  -o-animation-name: fadeOutDown;
  -o-animation-delay: 0.5s;
  -o-animation-duration: 0.5s;
  -o-animation-timing-function: ease;
  -o-animation-fill-mode: both;
  -moz-animation-name: fadeOutDown;
  -moz-animation-delay: 0.5s;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -webkit-animation-name: fadeOutDown;
  -webkit-animation-delay: 0.5s;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
  animation-name: fadeOutDown;
  animation-delay: 0.5s;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: both;
  backface-visibility: hidden; }

.step1 {
  -o-animation-name: fadeInDown;
  -o-animation-delay: 0s;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease;
  -o-animation-fill-mode: both;
  -moz-animation-name: fadeInDown;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
  animation-name: fadeInDown;
  animation-delay: 0s;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
  backface-visibility: hidden; }
  .step1.ng-leave, .step1.ng-enter-leave, .step1.ng-hide {
    -o-animation-name: fadeOut;
    -o-animation-delay: 0.5s;
    -o-animation-duration: 1s;
    -o-animation-timing-function: ease;
    -o-animation-fill-mode: both;
    -moz-animation-name: fadeOut;
    -moz-animation-delay: 0.5s;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -webkit-animation-name: fadeOut;
    -webkit-animation-delay: 0.5s;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    animation-name: fadeOut;
    animation-delay: 0.5s;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode: both;
    backface-visibility: hidden; }

.step2 {
  -o-animation-name: fadeInUp;
  -o-animation-delay: 0.5s;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease;
  -o-animation-fill-mode: both;
  -moz-animation-name: fadeInUp;
  -moz-animation-delay: 0.5s;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
  -webkit-animation-delay: 0.5s;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
  animation-name: fadeInUp;
  animation-delay: 0.5s;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
  backface-visibility: hidden; }
  .step2.ng-leave, .step2.ng-enter-leave, .step2.ng-hide {
    -o-animation-name: fadeOut;
    -o-animation-delay: 0.5s;
    -o-animation-duration: 1s;
    -o-animation-timing-function: ease;
    -o-animation-fill-mode: both;
    -moz-animation-name: fadeOut;
    -moz-animation-delay: 0.5s;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -webkit-animation-name: fadeOut;
    -webkit-animation-delay: 0.5s;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    animation-name: fadeOut;
    animation-delay: 0.5s;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode: both;
    backface-visibility: hidden; }

.step3 {
  -o-animation-name: fadeInUp;
  -o-animation-delay: 1s;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease;
  -o-animation-fill-mode: both;
  -moz-animation-name: fadeInUp;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
  animation-name: fadeInUp;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
  backface-visibility: hidden; }

.view-intro ion-footer-bar {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0 10px;
  height: 60px; }

.view-intro .scroll-content {
  background-image: url(../img/intro/bg.jpg);
  background-size: cover;
  background-color: #F01122;
  height: 100%;
  color: #fff;
  margin: 0; }
  .view-intro .scroll-content .button-fab {
    border-radius: 50%;
    min-width: 35px;
    min-height: 35px;
    width: 35px;
    height: 35px;
    border: none;
    transition: all 1s ease; }
    .view-intro .scroll-content .button-fab.left {
      left: 10px !important;
      position: absolute;
      bottom: 20px;
      width: 10px !important;
      box-shadow: 4px 5px 6px 0px rgba(0, 0, 0, 0.4); }
    .view-intro .scroll-content .button-fab.left:active {
      box-shadow: 4px 5px 6px 5px rgba(0, 0, 0, 0.4); }
    .view-intro .scroll-content .button-fab.right {
      right: 10px !important;
      position: absolute;
      bottom: 20px;
      width: 10px !important;
      box-shadow: -2px 5px 6px 0px rgba(0, 0, 0, 0.4); }
    .view-intro .scroll-content .button-fab.right:active {
      box-shadow: -2px 5px 6px 5px rgba(0, 0, 0, 0.4); }
  .view-intro .scroll-content .intro-slider {
    display: block;
    height: 100%; }
    .view-intro .scroll-content .intro-slider .content {
      position: relative;
      height: 100%; }
      .view-intro .scroll-content .intro-slider .content .last .logo2 {
        display: block;
        margin: 90px auto 20px auto;
        width: 80px; }
        .view-intro .scroll-content .intro-slider .content .last .logo2 img {
          width: 100%;
          border-radius: 18px; }
        .view-intro .scroll-content .intro-slider .content .last .logo2 span.icon2-logo {
          font-size: 45pt;
          color: #fff;
          display: block;
          margin: 22px;
          position: absolute;
          top: 0;
          left: 20%; }
      .view-intro .scroll-content .intro-slider .content .last button.button {
        color: #fff;
        border: 1px solid #fff;
        margin: 50px auto 0 auto;
        width: 90%;
        bottom: 10%; }
      .view-intro .scroll-content .intro-slider .content .last p {
        text-align: center;
        font: 500 20px Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
        -o-animation-name: fadeInDown;
        -o-animation-delay: 0.5s;
        -o-animation-duration: 1s;
        -o-animation-timing-function: ease;
        -o-animation-fill-mode: both;
        -moz-animation-name: fadeInDown;
        -moz-animation-delay: 0.5s;
        -moz-animation-duration: 1s;
        -moz-animation-timing-function: ease;
        -moz-animation-fill-mode: both;
        -webkit-animation-name: fadeInDown;
        -webkit-animation-delay: 0.5s;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-fill-mode: both;
        -webkit-backface-visibility: hidden;
        animation-name: fadeInDown;
        animation-delay: 0.5s;
        animation-duration: 1s;
        animation-timing-function: ease;
        animation-fill-mode: both;
        backface-visibility: hidden; }
      .view-intro .scroll-content .intro-slider .content span.top {
        display: block;
        padding: 0;
        margin: 10px 15px;
        height: 14%;
        position: relative;
        -o-animation-name: fadeInDown;
        -o-animation-delay: 0.5s;
        -o-animation-duration: 1s;
        -o-animation-timing-function: ease;
        -o-animation-fill-mode: both;
        -moz-animation-name: fadeInDown;
        -moz-animation-delay: 0.5s;
        -moz-animation-duration: 1s;
        -moz-animation-timing-function: ease;
        -moz-animation-fill-mode: both;
        -webkit-animation-name: fadeInDown;
        -webkit-animation-delay: 0.5s;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-fill-mode: both;
        -webkit-backface-visibility: hidden;
        animation-name: fadeInDown;
        animation-delay: 0.5s;
        animation-duration: 1s;
        animation-timing-function: ease;
        animation-fill-mode: both;
        backface-visibility: hidden; }
        .view-intro .scroll-content .intro-slider .content span.top h2 {
          display: block;
          position: absolute;
          text-align: center;
          color: #fff;
          bottom: 25%;
          width: 100%;
          margin: 0;
          padding: 0;
          font-size: 16pt;
          line-height: 16pt; }
      .view-intro .scroll-content .intro-slider .content .phone {
        position: relative;
        width: 80%;
        height: 736px;
        max-width: 414px;
        margin: 0 auto;
        -o-animation-name: fadeInUp;
        -o-animation-delay: 0.1s;
        -o-animation-duration: 1s;
        -o-animation-timing-function: ease;
        -o-animation-fill-mode: both;
        -moz-animation-name: fadeInUp;
        -moz-animation-delay: 0.1s;
        -moz-animation-duration: 1s;
        -moz-animation-timing-function: ease;
        -moz-animation-fill-mode: both;
        -webkit-animation-name: fadeInUp;
        -webkit-animation-delay: 0.1s;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-fill-mode: both;
        -webkit-backface-visibility: hidden;
        animation-name: fadeInUp;
        animation-delay: 0.1s;
        animation-duration: 1s;
        animation-timing-function: ease;
        animation-fill-mode: both;
        backface-visibility: hidden; }
        .view-intro .scroll-content .intro-slider .content .phone.iphone {
          background-image: url(../img/intro/devices/iphone.png);
          background-repeat: no-repeat;
          background-size: contain;
          width: 98%;
          max-width: 407px;
          min-width: 315px; }
          .view-intro .scroll-content .intro-slider .content .phone.iphone img {
            display: block;
            margin: 0 auto;
            position: relative;
            width: 79%;
            top: 11.1%; }
        .view-intro .scroll-content .intro-slider .content .phone.android {
          background-image: url(../img/intro/devices/android.png);
          background-repeat: no-repeat;
          background-size: contain;
          width: 90%;
          max-width: 340px;
          min-width: 330px;
          margin-top: 10px; }
          .view-intro .scroll-content .intro-slider .content .phone.android img {
            display: block;
            margin: 0 auto;
            position: relative;
            width: 90%;
            top: 7.1%; }
    .view-intro .scroll-content .intro-slider .slider {
      display: block;
      height: 100%;
      padding-top: 30px; }
    .view-intro .scroll-content .intro-slider .slider-pager,
    .view-intro .scroll-content .intro-slider button.button {
      -o-animation-name: fadeInDown;
      -o-animation-delay: 0.1s;
      -o-animation-duration: 1s;
      -o-animation-timing-function: ease;
      -o-animation-fill-mode: both;
      -moz-animation-name: fadeInDown;
      -moz-animation-delay: 0.1s;
      -moz-animation-duration: 1s;
      -moz-animation-timing-function: ease;
      -moz-animation-fill-mode: both;
      -webkit-animation-name: fadeInDown;
      -webkit-animation-delay: 0.1s;
      -webkit-animation-duration: 1s;
      -webkit-animation-timing-function: ease;
      -webkit-animation-fill-mode: both;
      -webkit-backface-visibility: hidden;
      animation-name: fadeInDown;
      animation-delay: 0.1s;
      animation-duration: 1s;
      animation-timing-function: ease;
      animation-fill-mode: both;
      backface-visibility: hidden; }
    .view-intro .scroll-content .intro-slider .slider-pager {
      top: 15px; }
      .view-intro .scroll-content .intro-slider .slider-pager span.slider-pager-page {
        top: 15px;
        color: #fff !important; }
